<template>
  <view class="mine">
    <view class="top-container">
      <view class="user-info">
        <view class="left">
          <!-- <tn-avatar
            size="120"
            font-size="80"
            icon="https://xinlong-shop.oss-cn-beijing.aliyuncs.com/goods/20221219/1391c21c-1bbe-47a7-ae32-1297d729816b.JPG"
            border-color="#FFFFFF"
            border="true"
            border-bold="true"
          ></tn-avatar> -->
          <view class="user-img">
            <img :src="mineUser.avatar" />
          </view>
          <view class="user-text">
            <view class="nickname" @click="toLogin">
              {{ mineUser.nickname }}
            </view>
            <!-- <view class="tel"> 15911100004 </view> -->
            <view class="grade" v-if="isLogin">{{ mineUser.gradeName }}</view>
          </view>
        </view>
        <view class="right">
          <view class="icon-item" @click="toUrl('/pages/mine/setting/setting')">
            <tn-icon class="icon" icon="set" color="#fff"></tn-icon>
          </view>
        </view>
      </view>
      <view class="user-profit">
        <view class="user-profit-block tn-flex-row tn-bg-main">
          <view class="profit-item">
            <view class="profit-title">当月收益</view>
            <view class="profit-value"
              ><tn-count-to
                start-value="0"
                :end-value="mineUser.monthIncome"
                decimals="2"
              ></tn-count-to
            ></view>
          </view>
          <view class="profit-item">
            <view class="profit-title">当天收益</view>
            <view class="profit-value"
              ><tn-count-to
                start-value="0"
                :end-value="mineUser.dayIncome"
                decimals="2"
              ></tn-count-to
            ></view>
          </view>
          <view class="profit-item">
            <view class="profit-title">预期收益</view>
            <view class="profit-value"
              ><tn-count-to
                start-value="0"
                :end-value="mineUser.expectIncome"
                decimals="2"
              ></tn-count-to
            ></view>
          </view>
        </view>
      </view>
    </view>

    <!-- 功能区 -->
    <view class="mine-ribbon">
      <view class="ribbon-item buy-order">
        <view class="item-title tn-flex-row" @click="toBuyerOrder('all')">
          <view class="title-text">买方订单</view>
          <view class="right-icon">
            <tn-icon class="icon" icon="right" color="#999"></tn-icon>
          </view>
        </view>
        <view class="item-icon tn-flex-row">
          <view class="icon-item" @click="toBuyerOrder('buy')">
            <tn-icon class="icon" icon="money"></tn-icon>
            <view class="text">待付款</view>
          </view>
          <view class="icon-item" @click="toBuyerOrder('pay')">
            <tn-icon class="icon" icon="prize"></tn-icon>
            <view class="text">待收款确认</view>
          </view>
          <view class="icon-item" @click="toBuyerOrder('confirm')">
            <tn-icon class="icon" icon="trust-fill"></tn-icon>
            <view class="text">待上架</view>
          </view>
          <view class="icon-item" @click="toBuyerOrder('put-sale')">
            <tn-icon class="icon" icon="order"></tn-icon>
            <view class="text">已完成</view>
          </view>
        </view>
      </view>

      <view class="ribbon-item seller-order">
        <view class="item-title tn-flex-row" @click="toSellerOrder('all')">
          <view class="title-text">卖方订单</view>
          <view class="right-icon">
            <tn-icon class="icon" icon="right" color="#999"></tn-icon>
          </view>
        </view>
        <view class="item-icon tn-flex-row">
          <view class="icon-item" @click="toSellerOrder('not-buy')">
            <tn-icon class="icon" icon="cart"></tn-icon>
            <view class="text">上架中</view>
          </view>
          <view class="icon-item" @click="toSellerOrder('buy')">
            <tn-icon class="icon" icon="money"></tn-icon>
            <view class="text">待付款</view>
          </view>
          <view class="icon-item" @click="toSellerOrder('pay')">
            <tn-icon class="icon" icon="prize"></tn-icon>
            <view class="text">待收款确认</view>
          </view>

          <view class="icon-item" @click="toSellerOrder('confirm')">
            <tn-icon class="icon" icon="order"></tn-icon>
            <view class="text">已完成</view>
          </view>
        </view>
      </view>

      <!-- 常用功能 -->
      <view class="ribbon-item common-use">
        <view class="item-title tn-flex-row">
          <view class="title-text">常用功能</view>
          <!-- <view class="right-icon">
            <tn-icon class="icon" icon="right" color="#999"></tn-icon>
          </view> -->
        </view>
        <view class="item-icon tn-flex-row">

          <view class="icon-item" v-for="(item, index) in menuList" @click="toUrl(item.url)">
            <tn-icon class="icon" :icon="item.icon"></tn-icon>
            <view class="text">{{ item.name }}</view>
          </view>
          <!-- 增加一个空的 -->
          <view class="icon-item" v-if="menuList.length == 9">
            
          </view>
        </view>
      </view>
    </view>
    <view class="white-block"> </view>
  </view>
</template>

<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import TnIcon from "@/tuniao-ui/components/tn-icon/src/Icon.vue";
import TnCountTo from "@/tuniao-ui/components/tn-count-to/src/CountTo.vue";
import { useUserStore } from "@/tuniao-ui/store/user";
import logo from "@/static/images/logo.png";
import { navPage, navLogin } from "@/tuniao-ui/utils";
import { getBalance } from "@/api/user";
import { findIncomeInfo } from "@/api/income";
import { ResultEnum } from "@/enums/httpEnum";

const userStore = useUserStore();
const isLogin = ref<boolean>(false);

const menuList = ref([
  {
    icon: "cardbag-fill",
    name: "收款管理",
    url: "/pages/mine/payment/payment",
  },
  {
    icon: "lucky-money-fill",
    name: "我的收益",
    url: "/pages/mine/income/income",
  },
  {
    icon: "map-fill",
    name: "我的地址",
    url: "/pages/mine/address/address",
  },
  {
    icon: "share-triangle",
    name: "分享有礼",
    url: "/pages/mine/share/invite",
  },
  {
    icon: "qr-code",
    name: "邀请码",
    url: "/pages/mine/share/qrcode",
  },
  {
    icon: "service-fill",
    name: "客户服务",
    url: "/pages/article/articleDetail?articleId=4",
  },
  {
    icon: "order-fill",
    name: "注册协议",
    url: "/pages/article/articleDetail?articleId=2",
  },
  {
    icon: "ticket-fill",
    name: "寄售协议",
    url: "/pages/article/articleDetail?articleId=1",
  },
  {
    icon: "help-fill",
    name: "关于我们",
    url: "/pages/article/articleDetail?articleId=5",
  }

]);

const mineUser = reactive({
  memberName: "",
  memberNo: "",
  nickname: "",
  avatar: logo,
  status: 0,
  gradeName: "",
  monthIncome: 0.0,
  dayIncome: 0.0,
  expectIncome: 0.0,
});

function toUrl(url: string) {
  //console.log(url);
  if (!isLogin.value) {
    navLogin();
    return;
  }
  navPage(url);
}

function toBuyerOrder(status: string){
  if (!isLogin.value) {
    navLogin();
    return;
  }
  navPage("/pages/mine/order/buyerOrder?status=" + status)
}

function toSellerOrder(status: string) {
  if (!isLogin.value) {
    navLogin();
    return;
  }
  navPage("/pages/mine/order/sellerOrder?status=" + status)
}

function toLogin() {
  if (!isLogin.value) {
    //console.log("toUrl", toUrl);
    navLogin();
  }
}

function loadUserInfo() {
  isLogin.value = userStore.isLogin();
  if (isLogin.value) {
    

    mineUser.gradeName = "普通用户";

    userStore.GetInfo().then((res) => {
      //console.log(res, "会员:");
      mineUser.nickname = userStore.getNickname;
      mineUser.memberNo = userStore.getMemberNo;
      mineUser.memberName = userStore.getMemberName;
      // 有头像就显示头像
      if (userStore.getAvatar !== "") {
        mineUser.avatar = userStore.getAvatar;
      }
      console.log(userStore.getUserInfo.gradeId);
      let gradeId = userStore.getUserInfo.gradeId;
      if (gradeId == 5 || gradeId == 6) {
        menuList.value.push({
          icon: "cart-fill",
          name: "购物车",
          url: "/pages/purchase/purchaseCart",
        })
      }
    });

    // 获取余额
    // getBalance().then((res) => {
    //   if (res.code === ResultEnum.SUCCESS) {
    //     mineUser.balance = res.result;
    //   }
    // })
    
    findIncomeInfo().then((res) => {
      if (res.code === ResultEnum.SUCCESS) {
        mineUser.monthIncome = res.result.monthTotal;
        mineUser.dayIncome = res.result.dayTotal;
        mineUser.expectIncome = res.result.expectIncome;
        console.log(mineUser);
      }
    });

  } else {
    mineUser.nickname = "请登录";
    mineUser.monthIncome = 0.0;
    mineUser.dayIncome = 0.0;
    mineUser.expectIncome = 0.0;
  }
}

onMounted(() => {
  loadUserInfo();
});
</script>
<style lang="scss" scoped>
.mine {
  height: 100%;
  background-color: #f5f5f5;
  min-height: 1000rpx;
}
.top-container {
  height: 300rpx;
  background-color: rgb(88, 79, 56);
  border-radius: 0 0 30rpx 30rpx;
  .user-info {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    padding: 0 30rpx;
    padding-top: 50rpx;
    .left {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: flex-start;
      .user-img {
        height: 120rpx;
        width: 120rpx;
        border-radius: 50%;
        overflow: hidden;
        border: #fff 5rpx solid;
        img {
          width: 100%;
        }
      }
      .user-text {
        color: #fff;
        font-size: 40rpx;
        margin-left: 20rpx;
        .tel {
          font-size: 30rpx;
          margin-top: 5rpx;
        }
        .grade {
          font-size: 20rpx;
          background-color: rgb(131, 106, 8);
          border-radius: 20rpx;
          text-align: center;
          padding: 0 10rpx;
          margin-top: 15rpx;
          width: 150rpx;
        }
      }
    }
    .right {
      display: flex;
      flex-direction: row;

      .icon-item {
        .icon {
          font-size: 50rpx;
        }
      }
    }
  }

  .user-profit {
    height: 130rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .user-profit-block {
      margin-top: 100rpx;
      width: 95%;
      height: 100%;
      border-radius: 20rpx;
      .profit-item {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        .profit-title {
          font-size: 25rpx;
          color: #fff;
        }
        .profit-value {
          .tn-count-to {
            font-size: 30rpx;
          }

          color: #fff;
          margin-top: 10rpx;
        }
      }
    }
  }
}
/** 功能区 */
.mine-ribbon {
  padding: 0 20rpx;
  padding-top: 60rpx;
  .ribbon-item {
    margin-top: 40rpx;
    background-color: #fff;
    border-radius: 20rpx;
    width: 100%;
    padding: 20rpx;
    .item-title {
      font-size: 30rpx;
      font-weight: bold;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
    }
    .item-icon {
      margin-top: 30rpx;
      .icon-item {
        display: flex;
        justify-content: space-between;
        flex-direction: column;
        align-items: center;
        width: 25%;
        .icon {
          font-size: 60rpx;
          color: #444;
          margin: 0 auto;
        }
        .text {
          margin-top: 10rpx;
        }
      }
    }
  }
  .common-use {
    .item-icon {
      justify-content: space-between;
      flex-wrap: wrap;
      margin-top: 0;
      .icon-item {
        width: 20%;
        margin-top: 30rpx;
        .icon {
          font-size: 50rpx;
        }
        .text {
          font-size: 20rpx;
        }
      }
    }
  }
}

.white-block {
  width: 100%;
  height: 150rpx;
}
</style>
